<!-- 文本卡片列表 -->
<template>
  <div class="card">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>{{data.title}}</span>
            <!--
              <el-button style="float: right; padding: 3px 0" type="text" @click="moreClick()">
              更多
            </el-button>
            -->
        </div>
        <ul class="item">
            <li v-for="item in data.data" :key="item.Guid">
              <span class="t_l"><b>{{item.AddTime|fnDateDay}}</b>{{item.AddTime|fnDateMonth}}</span>
              <em class="china">|</em>
              <a @click="openView(item.Guid)">{{item.Title|fnTitle}}</a>
            </li>
        </ul>
      </el-card>
  </div>
</template>

<script>
import { fnhtmlString,fninterceptString ,fnDatetime} from "@/unit/index";
import { ArticleList } from "@/api/data";

import store from "@/store/modules/webnav/index";

export default {
  data() {
    return {};
  },
  store,
  props: ["data"],
  /**过滤器 */
  filters: {
    fnTitle(data) {
      let res=fnhtmlString(data);
      return fninterceptString(res,10);
    },
    fnDateDay(time){
      let obj=fnDatetime(time);
      return obj.day;
    },
    fnDateMonth(time){
      let obj=fnDatetime(time);
      return obj.month+'月';
    }
  },
  methods:{
    //更多
    moreClick(){
      let link=this.data.link;
      //路由编程式跳转
      this.$router.push({path: link});
    },
    openView(id){
      let path=this.$router.resolve({path:'/View'})

      window.open(path.href+'/'+id,'_blank');
    }
  },
  /** 组件注册 */
  components: {}
};
</script>
<style scoped>
.card {
  padding-bottom: 10px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.clearfix {
  font-size: 14px;
}
.clearfix span {
  font-weight: bold;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 320px;
}
.china {
  font-style: normal;
  margin: 0 12px;
  color: #ccc;
}
.t_l b {
  font-size: 20px;
  color: #555;
  margin-right: 4px;
}
.t_l {
  font-size: 12px;
  color: #888;
}
li{
  border-bottom:solid 1px #eee;
  padding: 8px 0;
}
li:hover .t_l b,
li:hover .t_l {
  color: #409eff;
}
</style>